<template>
    <div>
        <template v-for="(item, index) in menuList" :key="item.index">
            <el-menu-item v-if="!item.children" :index="item.index">
                <el-icon>
                    <component :is="item.icon"></component>
                </el-icon>
                <span>{{ item.title }}</span>
            </el-menu-item>
            <el-sub-menu v-if="item.children" :index="item.index">
                <template #title>
                    <el-icon>
                        <component :is="item.icon"></component>
                    </el-icon>
                    <span>{{item.title}}</span>
                </template>
                <Menu :menuList="item.children"/>
            </el-sub-menu> 
        </template>
    </div>
</template>
<script  lang="ts">
export default{
    name:'Menu',
    props:["menuList"]
}
</script>
<style scoped></style>